import React, { Component } from 'react';
import { Row, Col, Card, List, Avatar, Button, Input, InputNumber, Menu, Select } from 'antd';
import Link from 'umi/link';
import { connect } from 'dva';
import { formatMessage } from 'umi/locale';
import KnifeCutParamsForm from './hdForms/KnifeCutParamsForm';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

@connect(({ ds, cbjt }) => ({ ds, cbjt }))
class CbjZmcTool extends Component {
  constructor(props) {
    super(props);
    this.state = {
      nowPointNumber: '1', // 当前点的编号.
      pointList: ['1', '2', '3', '4','5','6','7','8','9'], // 显示的点的编号
      axisList: ['X', 'Y', 'Z', 'W'], // 显示的轴编号
      axisNumber: 'X', // 轴号
      moveDistance: '', // 移动距离
      lineX1: '', // 切直线的时候点1的x坐标
      lineY1: '', // 切直线的时候点1的y坐标
      lineX2: '', // 切直线的时候点2的x坐标
      lineY2: '', // 切直线度额时候点2的y坐标
      offsetX: '', // 刀头激光偏移X方向偏移
      offsetY: '', // 刀头激光偏移Y方向偏移
      outputList: [formatMessage({ id: 'app.tools.Vac-sorb' }),
       formatMessage({ id: 'app.tools.RotatingBlades' }),
       formatMessage({ id: 'app.tools.PressBarDown' }),
       formatMessage({ id: 'app.tools.FailureVacuum' }),
       formatMessage({ id: 'app.tools.MotorAlarmClearance' })], // 显示的真空操作的列表
      chooseOutPut: formatMessage({ id: 'app.tools.Vac-sorb' }),
      crossCenterX: '',// 十字中心点x坐标
      crossCenterY: '', // 十字中心点y坐标
      dragDis: '', // 拖拽距离
      fourX: '',// 四轴绝对移动x坐标
      fourY: '', // 四轴绝对移动y坐标
      fourZ: '', // 四轴绝对移动z坐标
      fourW: '', // 四轴绝对移动w坐标
      intervalX: '',// X间隔
      intervalY: '',// Y间隔
      xNums: '',// x轴采样个数
      yNums: '',// y轴采样个数
      xMin: '', // 测高最小x坐标
      yMin: '', // 测高最小y坐标
    };
  }

  clickOpenGetPos = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cbjt/clickOpenGetPos',
    });
  };

  clickCloseGetPos = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cbjt/clickCloseGetPos',
    });
  };

  clickRsStop = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cbjt/clickRsStop',
    });
  };

  clickCbjReset = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cbjt/clickCbjReset',
    });
  };

  onPointChange = value => {
    this.setState({
      nowPointNumber: value,
    });
  };

  savePointCoord = e => {
    const { dispatch } = this.props;
    const { xDpos, yDpos } = this.props.cbjt;
    const { nowPointNumber } = this.state;

    dispatch({
      type: 'cbjt/savePointCoord',
      payload: [nowPointNumber, xDpos, yDpos],
    });
  };

  onAxisNumberChange = value => {
    this.setState({
      axisNumber: value,
    });
  };

  axisRelMove = e => {
    const { dispatch } = this.props;
    const { axisNumber, moveDistance } = this.state;
    dispatch({
      type: 'cbjt/axisRelMove',
      payload: [axisNumber, moveDistance],
    });
  };

  axisAbsMove = e => {
    const { dispatch } = this.props;
    const { axisNumber, moveDistance } = this.state;
    dispatch({
      type: 'cbjt/axisAbsMove',
      payload: [axisNumber, moveDistance],
    });
  };

  cutOneLine = e => {
    const { dispatch } = this.props;
    const { lineX1, lineY1, lineX2, lineY2 } = this.state;
    dispatch({
      type: 'cbjt/cutOneLine',
      payload: [lineX1, lineY1, lineX2, lineY2],
    });
  };

  cutRect = e => {
    const { dispatch } = this.props;
    const { lineX1, lineY1, lineX2, lineY2 } = this.state;
    dispatch({
      type: 'cbjt/cutRect',
      payload: [lineX1, lineY1, lineX2, lineY2],
    });
  };

  cutOneLineWithCapfile = e => {
    const { dispatch } = this.props;
    const { lineX1, lineY1, lineX2, lineY2 } = this.state;
    dispatch({
      type: 'cbjt/cutOneLineWithCapfile',
      payload: [lineX1, lineY1, lineX2, lineY2],
    });
  };

  saveKnifeOffset = e => {
    const { dispatch } = this.props;
    const { offsetX, offsetY } = this.state;
    dispatch({
      type: 'cbjt/saveKnifeOffset',
      payload: [offsetX, offsetY],
    });
  };

  onOutputChange = value => {
    this.setState({
      chooseOutPut: value,
    });
  };

  openOutput = e => {
    const { dispatch } = this.props;
    const { chooseOutPut } = this.state;
    dispatch({
      type: 'cbjt/openOutput',
      payload: chooseOutPut,
    });
  };

  closeOutput = e => {
    const { dispatch } = this.props;
    const { chooseOutPut } = this.state;
    dispatch({
      type: 'cbjt/closeOutput',
      payload: chooseOutPut,
    });
  };

  cutCrossTest = e => {
    const { dispatch } = this.props;
    const { crossCenterX, crossCenterY } = this.state;
    dispatch({
      type: 'cbjt/cutCrossTest',
      payload: [crossCenterX, crossCenterY],
    });
  };

  dragTest = e => {
    const { dispatch } = this.props;
    const { dragDis } = this.state;
    dispatch({
      type: 'cbjt/dragTest',
      payload, dragDis,
    })
  };

  testPlatform  = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cbjt/testPlatform',
    });
  };

  // 下刀
  downKnife = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cbjt/downKnife',
    });
  };

  // 抬刀
  upKnife = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cbjt/upKnife',
    });
  };

  fourAxisAbsMove = e => {
    const { dispatch } = this.props;
    const { fourX, fourY, fourZ, fourW } = this.state;
    dispatch({
      type: 'cbjt/fourAxisAbsMove',
      payload: [fourX, fourY, fourZ, fourW]
    });
  };

  saveCapfile = e => {
    const { dispatch } = this.props;
    const { intervalX, intervalY, xMin, yMin, xNums, yNums } = this.state;
    dispatch({
      type: 'cbjt/saveCapfile',
      payload: [xMin, yMin, xNums, yNums, intervalX, intervalY],
    });
  };
  saveTableUsedDays = e => {
    const { dispatch } = this.props;
    const { TableUsedDays } = this.state;
    dispatch({
      type: 'cbjt/saveTableUsedDays',
      payload: [TableUsedDays],
    });
  };

  saveTableUsedInit = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cbjt/saveTableUsedInit',
    });
  };

  render() {
    const { cbjZmcStates } = this.props.ds;
    const {
      knifeCutParams,
      xDpos, // x轴坐标
      yDpos, // y轴坐标
      zDpos, // z轴坐标
      wDpos, // w轴坐标
      btnOpenGetPosCliked, // 坐标反馈按钮是否按下,如果已经打开成功了,就要变灰色.
    } = this.props.cbjt;
    const { nowPointNumber, pointList, axisList, outputList } = this.state;
    const pointChildren = [];

    for (let i = 0; i < pointList.length; i++) {
      pointChildren.push(
        <Select.Option key={i.toString()} value={pointList[i]}>
          {pointList[i]}
        </Select.Option>
      );
    }

    const axisChildren = [];
    for (let i = 0; i < axisList.length; i++) {
      axisChildren.push(
        <Select.Option key={i.toString()} value={axisList[i]}>
          {axisList[i]}
        </Select.Option>
      );
    }

    const outputChildren = [];
    for (let i = 0; i < outputList.length; i++) {
      outputChildren.push(
        <Select.Option key={i.toString()} value={outputList[i]}>
          {outputList[i]}
        </Select.Option>
      );
    }

    return (
      <>
        <Card title={<font style={{ color: '#FF0000', fontSize: 16 }}>{formatMessage({ id: 'app.tools.CbjCutParamrSetting' })}</font>}>
          <KnifeCutParamsForm knifeCutParams={knifeCutParams} />
        </Card>
        <Card title={<font style={{ color: '#FF0000', fontSize: 16 }}>{formatMessage({ id: 'app.tools.CbjMoveControl' })}</font>}>
          <Row>
            <Col>
            {formatMessage({ id: 'app.tools.deviceState' })}:&nbsp;&nbsp;
              {cbjZmcStates.online ? (
                <font style={{ color: '#00FF00', fontSize: 16 }}>{formatMessage({ id: 'app.tools.connected' })}</font>
              ) : (
                <font style={{ color: '#FF0000', fontSize: 16 }}>{formatMessage({ id: 'app.tools.notConnected' })}</font>
              )}
              <Button
                onClick={this.clickOpenGetPos}
                style={{ marginLeft: 30 }}
                disabled={btnOpenGetPosCliked}
              >
                {formatMessage({ id: 'app.tools.OnPosFeedback' })}
              </Button>
              <Button
                onClick={this.clickCloseGetPos}
                style={{ marginLeft: 10 }}
                disabled={!btnOpenGetPosCliked}
              >
                {formatMessage({ id: 'app.tools.OffPosFeedback' })}
              </Button>
              <Button onClick={this.clickRsStop} style={{ marginLeft: 10 }}>
              {formatMessage({ id: 'app.tools.ManualEmergencyStop' })}
              </Button>
              <Button onClick={this.clickCbjReset} style={{ marginLeft: 10 }}>
              {formatMessage({ id: 'app.tools.ManualReset' })}
              </Button>
            </Col>
            <Col style={{ marginTop: 10 }}>
              {formatMessage({ id: 'app.tools.X-axisCoordinate' })}:&nbsp;
              <span style={{ marginRight: 10, width: 80 }}>{xDpos}</span>
              {formatMessage({ id: 'app.tools.Y-axisCoordinate' })}:&nbsp;
              <span style={{ marginRight: 10, width: 80 }}>{yDpos}</span>
              {formatMessage({ id: 'app.tools.Z-axisCoordinate' })}:&nbsp;
              <span style={{ marginRight: 10, width: 80 }}>{zDpos}</span>
              {formatMessage({ id: 'app.tools.W-axisCoordinate' })}:&nbsp;
              <span style={{ marginRight: 10, width: 80 }}>{wDpos}</span>
            </Col>
          </Row>
          <Row style={{ marginTop: 20 }}>
            <Col>
            {formatMessage({ id: 'app.tools.SelectionNumber' })}&nbsp;&nbsp;&nbsp;
              <Select
                style={{ width: 80 }}
                optionFilterProp="pointChildren"
                defaultValue={'1'}
                onChange={this.onPointChange}
              >
                {pointChildren}
              </Select>
              <Button style={{ marginLeft: 15 }} onClick={this.savePointCoord}>
              {formatMessage({ id: 'app.tools.SavePoint' })}{nowPointNumber}
              </Button>
            </Col>
          </Row>
          <Row style={{ marginTop: 20 }}>
            <Col>
            {formatMessage({ id: 'app.tools.MobileTest' })} &nbsp;&nbsp; {formatMessage({ id: 'app.tools.AxisNumber' })} &nbsp;
              <Select
                style={{ width: 60 }}
                optionFilterProp="axisChildren"
                defaultValue={'X'}
                onChange={this.onAxisNumberChange}
              >
                {axisChildren}
              </Select>
              <span style={{ marginLeft: 20 }}>{formatMessage({ id: 'app.tools.NumericalValue' })}&nbsp;</span>
              <Input
                defaultValue={''}
                onChange={e => this.setState({ moveDistance: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
              <Button onClick={this.axisRelMove} style={{ marginRight: 10 }}>
              {formatMessage({ id: 'app.tools.RelativeMovement' })}
              </Button>
              <Button onClick={this.axisAbsMove} style={{ marginRight: 10 }}>
              {formatMessage({ id: 'app.tools.AbsoluteMovement' })}
              </Button>
            </Col>
          </Row>
          <Row style={{ marginTop: 10 }}>
            <Col>
            {formatMessage({ id: 'app.tools.AbsoluteMobileTest' })}
            <Input
                defaultValue={''}
                onChange={e => this.setState({ fourX: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
            y&nbsp;
            <Input
                defaultValue={''}
                onChange={e => this.setState({ fourY: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
            z&nbsp;
            <Input
                defaultValue={''}
                onChange={e => this.setState({ fourZ: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
            w&nbsp;
            <Input
                defaultValue={''}
                onChange={e => this.setState({ fourW: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
              <Button onClick={this.fourAxisAbsMove} style={{ marginRight: 10 }}>
              {formatMessage({ id: 'app.tools.FourAbsoluteMobile' })}
            </Button>
            </Col>
          </Row>

          <Row style={{ marginTop: 20 }}>
            <Col>
            {formatMessage({ id: 'app.tools.TangentLineTest' })}&nbsp;&nbsp; x1&nbsp;
            <Input
                defaultValue={''}
                onChange={e => this.setState({ lineX1: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
            y1&nbsp;
            <Input
                defaultValue={''}
                onChange={e => this.setState({ lineY1: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
            x2&nbsp;
            <Input
                defaultValue={''}
                onChange={e => this.setState({ lineX2: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
            y2&nbsp;
            <Input
                defaultValue={''}
                onChange={e => this.setState({ lineY2: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
              <Button onClick={this.cutOneLine} style={{ marginRight: 10 }}>
              {formatMessage({ id: 'app.tools.TangentLine' })}
            </Button>
              <Button onClick={this.cutRect} style={{ marginRight: 10 }}>
              {formatMessage({ id: 'app.tools.CutRectangle' })}
            </Button>
              <Button onClick={this.cutOneLineWithCapfile} style={{ marginRight: 10 }}>
              {formatMessage({ id: 'app.tools.CompensatingLine' })}
            </Button>
              <Button onClick={this.cutFourLines} style={{ marginRight: 10 }}>
              {formatMessage({ id: 'app.tools.CompensatedRectangle' })}
            </Button>
            </Col>
          </Row>
          <Row style={{ marginTop: 20 }}>
            <Col>
            {formatMessage({ id: 'app.tools.ToolHeadLaserOffset' })}&nbsp;&nbsp;&nbsp; {formatMessage({ id: 'app.tools.X-directionMigration' })}: &nbsp;&nbsp;&nbsp;
            <Input
                onChange={e => this.setState({ offsetX: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
            {formatMessage({ id: 'app.tools.Y-directionMigration' })}: &nbsp;&nbsp;&nbsp;
            <Input
                onChange={e => this.setState({ offsetY: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
              <Button style={{ marginLeft: 15 }} onClick={this.saveKnifeOffset}>
              {formatMessage({ id: 'app.tools.save' })}
            </Button>
            </Col>
          </Row>

          <Row style={{ marginTop: 20 }}>
            <Col>
            {formatMessage({ id: 'app.tools.CrossCuttingTest' })}&nbsp;&nbsp; {formatMessage({ id: 'app.tools.CrossCenter' })} x&nbsp;
            <Input
                defaultValue={''}
                onChange={e => this.setState({ crossCenterX: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
            y&nbsp;
            <Input
                defaultValue={''}
                onChange={e => this.setState({ crossCenterY: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
              <Button onClick={this.cutCrossTest} style={{ marginRight: 20 }}>
              {formatMessage({ id: 'app.tools.CrossCutting' })}
            </Button>

            {formatMessage({ id: 'app.tools.DragTest' })}&nbsp;&nbsp; {formatMessage({ id: 'app.tools.Distance' })}&nbsp;
            <Input
                defaultValue={''}
                onChange={e => this.setState({ dragDis: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
              <Button onClick={this.dragTest} style={{ marginRight: 10 }}>
              {formatMessage({ id: 'app.tools.StartDragging' })}
            </Button>
            </Col>
          </Row>

          <Row style={{ marginTop: 20 }}>
            <Col>
            {formatMessage({ id: 'app.tools.OutputPortControl' })} &nbsp;&nbsp; {formatMessage({ id: 'app.tools.PortName' })} &nbsp;
              <Select
                style={{ width: 140 }}
                optionFilterProp="outputChildren"
                defaultValue={formatMessage({ id: 'app.tools.Vac-sorb' })}
                onChange={this.onOutputChange}
              >
                {outputChildren}
              </Select>
              <Button onClick={this.openOutput} style={{ marginLeft: 15 }}>
              {formatMessage({ id: 'app.tools.Open' })}
              </Button>
              <Button onClick={this.closeOutput} style={{ marginLeft: 15 }}>
              {formatMessage({ id: 'app.tools.Close' })}
              </Button>
            </Col>
          </Row>

          <Row style={{ marginTop: 20 }}>
            <Col>
            {formatMessage({ id: 'app.tools.Z-axisTest' })}&nbsp;&nbsp;
            <Button onClick={this.downKnife} style={{ marginRight: 10 }}>
            {formatMessage({ id: 'app.tools.Undercutting' })}
            </Button>
              <Button onClick={this.upKnife} style={{ marginRight: 10 }}>
              {formatMessage({ id: 'app.tools.KnifeLifting' })}
            </Button>
            </Col>
          </Row>

          <Row style={{ marginTop: 20 }}>
            <Col>
            {formatMessage({ id: 'app.tools.HeightMeasurement' })}&nbsp;&nbsp;{' '}
              <Button onClick={this.testPlatform} style={{ marginRight: 10 }}>
              {formatMessage({ id: 'app.tools.StartHeightMeasurement' })}
            </Button>
            </Col>
            <Col style={{ marginTop: 10 }}>
            {formatMessage({ id: 'app.tools.X-axisSpacing' })}&nbsp;
            <Input
                defaultValue={''}
                onChange={e => this.setState({ intervalX: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
            {formatMessage({ id: 'app.tools.Y-axisSpacing' })}&nbsp;
            <Input
                defaultValue={''}
                onChange={e => this.setState({ intervalY: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
            {formatMessage({ id: 'app.tools.X-axisNumber' })}&nbsp;
            <Input
                defaultValue={''}
                onChange={e => this.setState({ xNums: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
            {formatMessage({ id: 'app.tools.Y-axisNumber' })}&nbsp;
            <Input
                defaultValue={''}
                onChange={e => this.setState({ yNums: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
            {formatMessage({ id: 'app.tools.StartCoordinate' })}&nbsp; x:&nbsp;
            <Input
                defaultValue={''}
                onChange={e => this.setState({ xMin: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
            y:&nbsp;
            <Input
                defaultValue={''}
                onChange={e => this.setState({ yMin: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />

              <Button onClick={this.saveCapfile} style={{ marginRight: 10 }}>
              {formatMessage({ id: 'app.tools.SaveData' })}
            </Button>
            </Col>
          </Row>
          <Row style={{ marginTop: 20 }}>
            <p>
            {formatMessage({ id: 'app.tools.TI2' })}
            </p>
            <Col>
              <Button onClick={this.saveTableUsedInit} style={{ marginRight: 10, color: 'red' }}>
              {formatMessage({ id: 'app.tools.Initialization' })}
              </Button>

              <span style={{ marginLeft: 20 }}>{formatMessage({ id: 'app.tools.UsedTime(/ day)' })}&nbsp;</span>
              <Input
                defaultValue={''}
                onChange={e => this.setState({ TableUsedDays: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
              <Button onClick={this.saveTableUsedDays} style={{ marginRight: 10, color: 'red' }}>
              {formatMessage({ id: 'app.tools.SaveUsedTime' })}
              </Button>
            </Col>
          </Row>
        </Card>
      </>
    );
  }
}

export default CbjZmcTool;
